<template>
  <div id="app" :class="[this.$store.state.global.colorStyle === 1 ? 'dark' : 'bright']">
    <!-- DarkMode v-if="this.$store.state.global.colorStyle === 1"></DarkMode -->
    <!-- BrightMode v-if="this.$store.state.global.colorStyle === 2"></BrightMode -->
    <router-view/>
  </div>
</template>

<script>
// const BrightMode = resolve => require(['@/components/common/BrightMode'], resolve)
// const DarkMode = resolve => require(['@/components/common/DarkMode'], resolve)
export default {
  name: 'App',
  // components: {DarkMode, BrightMode},
  /* watch: {
    '$store.state.global.colorStyle': () => {
      window.location.reload()
    }
  } */
  mounted () {
    // 需不需要在卸载前清空一些缓存 ?
    window.addEventListener('beforeunload', () => {
      this.localStorage.clear()
      this.sessionStorage.clear()
    })
  }
  /*  原如下 修改为 -> 使用插件 persistedstate 解决 vuex 刷新数据丢失问题
  created () {
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  } */
  /* Vue 实现一键换肤思路
  1. 给 app 定义一个 class 如 .dark 或 .bright, 不同模式下的 css 样式都放在 .dark 或 .bright 下，如 .dark .xxx {} 、 .bright .xxx {}
  2. 按需引入组件
     const BrightMode = resolve => require(['@/components/common/BrightMode'], resolve)
     const DarkMode = resolve => require(['@/components/common/DarkMode'], resolve)
     在不同的组件中分别引入不同的样式，需要添加监听
     问题：需要刷新页面 */
}
</script>

<style lang="less">
@import './assets/css/common.css';
@import './assets/css/bright-mode.less';
@import './assets/css/dark-mode.less';
</style>
